<template>
  <div>
    <el-dialog
      title="提示"
      :visible.sync="dialogVisible"
      width="30%"
      :show-close="false"
      :modal="false">
      <span>是否要支付？</span>
      <span slot="footer" class="dialog-footer">
          <el-button type="primary" @click="pay()">是</el-button>
          <el-button type="danger" @click="dialogVisible = false">否</el-button>
      </span>
    </el-dialog>

    <!-- <el-table
      :data="listMyOrder" stripe style="position: fixed;top:10%;width: 80%;height: 100%;">
      <el-table-column label="图片" prop="goods.image" align="center">
          <template slot-scope="scope">
            <img :src="scope.row.goods.image" alt="" style="width: 80px;height: 80px">
          </template>
      </el-table-column>
      <el-table-column label="名称" prop="goods.name" align="center">
      </el-table-column>
      <el-table-column label="价格" prop="price" align="center">
      </el-table-column>
      <el-table-column label="时间" prop="createTime" align="center">
      </el-table-column>
      <el-table-column label="状态" align="center">
          <template slot-scope="scope">
            {{ getStatusLabel(scope.row.payStatus) }}
          </template>
      </el-table-column>
      <el-table-column label="操作" align="center">
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="primary"
              @click="openDialog(scope.row.id)"
              v-if="scope.row.payStatus === 0">支付</el-button>
            <el-button
              size="mini"
              type="primary"
              @click="confirmOrder(scope.row.id)"
              v-if="scope.row.payStatus === 4">确认收货</el-button>
            <el-tag v-if="scope.row.payStatus !== 0 && scope.row.payStatus !== 4">无可用操作</el-tag>
          </template>
       </el-table-column>
    </el-table> -->
    <div style="height: 70vh; overflow-y: auto; top:10%; width: 100%;">
      <el-table
          :data="listMyOrder" stripe>
          <el-table-column label="图片" prop="goods.image" align="center">
              <template slot-scope="scope">
                <img :src="scope.row.goods.image" alt="" style="width: 80px;height: 80px">
              </template>
          </el-table-column>
          <el-table-column label="名称" prop="goods.name" align="center">
          </el-table-column>
          <el-table-column label="价格" prop="price" align="center">
          </el-table-column>
          <el-table-column label="时间" prop="createTime" align="center">
          </el-table-column>
          <el-table-column label="状态" align="center">
              <template slot-scope="scope">
                {{ getStatusLabel(scope.row.payStatus) }}
              </template>
          </el-table-column>
          <el-table-column label="操作" align="center">
              <template slot-scope="scope">
                <el-button
                  size="mini"
                  type="primary"
                  @click="openDialog(scope.row.id)"
                  v-if="scope.row.payStatus === 0">支付</el-button>
                <el-button
                  size="mini"
                  type="primary"
                  @click="confirmOrder(scope.row.id)"
                  v-if="scope.row.payStatus === 4">确认收货</el-button>
                <el-tag v-if="scope.row.payStatus !== 0 && scope.row.payStatus !== 4">无可用操作</el-tag>
              </template>
          </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
import ElementUI from "element-ui";
import axios from "axios";
import { getServerUrl } from "@/config/url";
import { listOrder, payOrder,confirm } from "@/api/order.js";

export default {
  name: "listMyOrder",
  data() {
    return {
      listMyOrder: null,
      dialogVisible: false,
    };
  },
  methods: {
    confirmOrder(id) {
      let _this = this;
      confirm(id)
        .then(function (response) {
          if (response.code === 200) {
            _this.loadData();
          }
        })
        .catch(function (error) {
          console.log(error);
        });
    },
    pay() {
      let _this = this;
      payOrder(window.sessionStorage.getItem("payOrderId"))
        .then(function (response) {
          if (response.code === 200) {
            ElementUI.Message.success("支付成功");
            _this.loadData();
            _this.dialogVisible = false;
          }
        })
        .catch(function (error) {
          console.log(error);
        });
    },
    loadData() {
      listOrder()
        .then((response) => (this.listMyOrder = response.rows))
        .catch(function (error) {
          console.log(error);
        });
    },
    openDialog: function (id) {
      this.dialogVisible = true;
      sessionStorage.setItem("payOrderId", id);
    },
    getStatusLabel(payStatus) {
      if (payStatus === 0) {
        return "待支付";
      } else if (payStatus === 1) {
        return "已支付，等待出库";
      } else if (payStatus === 2) {
        return "30分钟未支付自动取消";
      } else if (payStatus === 3) {
        return "配送中";
      } else if (payStatus === 4) {
        return "等待收货";
      } else if (payStatus === 5) {
        return "完成";
      }
    },
  },
  created() {
    this.loadData();
  },
};
</script>

<style>
.el-main {
  line-height: normal;
}
.goods_table{
    margin-left: 100px;
}
</style>
<!-- <style scoped></style> -->
